<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			body {
				perspective: 500px;
			}

			.father {
				position: relative;
				width: 200px;
				height: 200px;
				background-color: green;
				margin: 50px auto;
				transition: all 1s;
				transform-style:preserve-3D
			}

			.a {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				background-color: yellow;
				transform: rotateX(60deg);
				transition: all 1s;
			}

			.father:hover {
				transform: rotateY(-60deg);
			}
		</style>
	</head>
	<body>
		<h2>3D呈现 transform-style</h2>
		<ul>
			<li>控制子元素是否开启三维立体环境</li>
			<li>transform-style:flat 子元素不开启3D立体空间 默认的</li>
			<li>transform-style:preserve-3D; 子元素开启立体空间 preserve保持</li>
			<li>代码写给父级但是影响的是子盒子</li>
			<li>这个属性很重要，后面必用</li>
		</ul>
		<h1>3D两个重要属性: 透视 和 preserve-3D</h1>

		<div class="father">
			<div class="a"></div>
		</div>
	</body>
</html>
